<template>
  <el-dialog
      :model-value="updateDialogVisible"
      title="预约信息修改"
      width="50%"
      draggable
      center
      @close="handleClose"
  >
    <el-form ref="updatefrom" :model="form" label-width="150px" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="预约编号：" prop="practiseId">
            <el-select v-model="form.practiseId" placeholder="">
              <el-option
                  v-for="item in practiselist"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约学员：" prop="userId">
            <el-select v-model="form.userId" placeholder="">
              <el-option
                  v-for="item in studentlist"
                  :key="item.userId"
                  :label="item.userId"
                  :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="预约结束时间：" prop="time">
            <el-date-picker
                v-model="form.time"
                type="date"
                placeholder=""
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleCommit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,watch} from "vue";
import {getAllPlace, UpdatePractise} from "@/api/practise";
import {ElMessage} from "element-plus";
import {getAllStudent} from "@/api/student";
import {UpdateOrderPractise} from "@/api/order_practise";
//获取父组件方法或传值
const props = defineProps({
  DialogTableValue:{
    type:Object,
    default:() => {}
  },
  initGetStudents:{
    type:Function,
    required:true
  }
})
const practiselist = ref({})
const studentlist = ref({})
getAllPlace({pageNum:1,pageSize:99999}).then(res=>{
  if (res.code === 20041){
    practiselist.value = res.data.list
    console.log(practiselist.value)
  }else {
    ElMessage({
      message: '暂无可预约练车场',
      type: 'error',
    })
  }
})
getAllStudent({pageNum:1,pageSize:99999}).then(res=>{
  if (res.code === 20041){
    studentlist.value = res.data.list
    console.log(studentlist.value)
  }else {
    ElMessage({
      message: '暂无学员',
      type: 'error',
    })
  }
})
//初始化表单
const form = ref({})
const updatefrom=ref(null)
//校验规则
const rules =ref({
  practiseId:[
    { required: true, message: '预约编号不能为空', trigger: 'blur' }
  ],
  userId:[
    { required: true, message: '预约学员号不能为空', trigger: 'blur' }
  ],
  time:[
    { required: true, message: '预约期限不能为空', trigger: 'blur' }
  ]
})
//对话框动作
const Emits=defineEmits(['update:modelValue'])
const handleClose=()=>{
  Emits('update:modelValue',false)
}
//监听表单数据变化
watch(()=>props.DialogTableValue,()=>{
  // console.log(props.DialogTableValue)
  form.value=props.DialogTableValue
},{deep:true,immediate:true})

//修改
const handleCommit=()=>{
  updatefrom.value.validate(async (valid) => {
    if (valid) {
      await UpdateOrderPractise(form.value).then(res=>{
        if(res.code===20031){
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '修改失败',
            type: 'error',
          })
        }
        props.initGetStudents()
      })
    } else {
      console.log('error submit!')
    }
  })
  handleClose()
}
</script>

<style scoped>

</style>